<template>
    <a-modal v-model:visible="dialogVisiable" title-align="start" @ok="handleOk" @cancel="handleCancel" width="850px">
      <template #title> {{title}}{{type == 1 ? '组织' : '外部机构'}}</template>
      <a-form ref="rerForm" :model="addForm" :rules="rules">
        <a-form-item field="org_name" label="企业名称">
            <a-input v-model="addForm.org_name" placeholder="请输入" />
        </a-form-item>
        <a-form-item field="is_outer" label="是否为外部机构">
          <a-radio-group v-model="addForm.is_outer">
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="org_type" label="组织类型">
            <a-select placeholder="请选择" v-model="addForm.org_type">
                <a-option v-for="item in orgStatus" :key="`${item}`">{{item}}</a-option>
            </a-select>
        </a-form-item>
        <a-form-item field="credit_code" label="统一社会信用代码">
            <a-input v-model="addForm.credit_code" placeholder="请输入"/>
        </a-form-item>
        <a-form-item field="concat_user" label="联系人">
            <a-input v-model="addForm.concat_user" placeholder="请输入"/>
        </a-form-item>
        <a-form-item field="phone" label="联系电话">
            <a-input v-model="addForm.phone" placeholder="请输入"/>
        </a-form-item>
        <a-form-item field="address" label="注册地址">
            <a-input v-model="addForm.address" placeholder="请输入"/>
        </a-form-item>
        <a-form-item field="concat_address" label="联系地址">
            <a-input v-model="addForm.concat_address" placeholder="请输入"/>
        </a-form-item>
        <a-form-item field="org_logo" label="上传企业logo">
            <a-upload
      :action="uploadUrl"
      :headers="headers"
      :show-file-list="false"
      @change="onChange"
      @success="onSuccess"
    >
      <template #upload-button>
        <div class="logn-upload">
          <div class="add-img" v-if="imgUrl !== ''">
            <img :src="imgUrl" />
          </div>
          <div class="arco-upload-picture-card" v-else>
            <div class="arco-upload-picture-card-text">
              <IconPlus />
              <div style="margin-top: 10px; font-weight: 600">上传图片</div>
            </div>
          </div>
        </div>
      </template>
    </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
</template>
<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import * as T from '@/api/orgManagement/orgManagement_type';
import { org_create, org_update, org_detail } from '@/api/orgManagement/orgManagement'
import { Message } from '@arco-design/web-vue';
import store from '@/stores/store';
const orgStatus = ['政府部门','平台公司','企业公司','企业子公司','律所','数据评价公司','数据评估公司']
const uploadUrl = import.meta.env.VITE_API_BASE_URL + '/api/system/org/logo/upload'
const headers = {
  token: store.LoginData().tokenGet()
}
const addForm = reactive<T.CreateOrgItem>({
  org_name: '',
  is_outer: '2',
  org_type: '',
  credit_code: '',
  concat_user: '',
  phone: '',
  address: '',
  concat_address: '',
  org_logo: ''
})
const dialogVisiable = ref(false)
const rerForm = ref()
const title = ref('新增')
const imgUrl = ref('')
const rules = {
  org_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  is_outer: [{ required: true, message: '请选择是否为外部机构', trigger: 'change' }],
  org_type: [{ required: true, message: '请选择组织类型', trigger: 'change' }],
  credit_code: [{ required: true, message: '请输入社会统一信用代码', trigger: 'blur' }],
}
const emit = defineEmits(['onClose']);
const props = defineProps({
    orgId: Number,
    visiable: Boolean,
    isEdit: Boolean,
    type: String
})
watch(
  () => props.visiable,
  (newVal) => {
    dialogVisiable.value = newVal;
  }
);
watch(
  () => props.isEdit,
  () => {
    if (props.isEdit) {
      title.value = '编辑'
      getOrgDetail()
    } else {
      title.value = '新增'
    }
  }
);

/**
 * 获取组织详情
 */
 const getOrgDetail = async() => {
    let { code, data } = await org_detail({ org_code: props.orgId})
    if (code === 200) {
    
      Object.keys(data).forEach((key) => {
        if (addForm.hasOwnProperty(key)) {
          addForm[key] = data[key];
        }
      });
      addForm.is_outer = addForm.is_outer.toString()
      addForm.code = data.code
      addForm.parent_code = data.parent_code
      addForm.org_logo_url = data.org_logo_url
      if (data.org_logo !== '') imgUrl.value = data.org_logo_url
    }
}
/**
 * 提交
 */
const handleOk = async() => {
  addForm.is_outer = +addForm.is_outer
  if (props.isEdit) {
    let res = await org_update({...addForm});
    if (res.code === 200) {
      Message.success("更新成功")
      handleCancel()
    }
  } else {
    let res = await org_create({...addForm, ...{parent_code: props.orgId}});
    if (res.code === 200) {
      Message.success("创建成功")
        handleCancel()
    }
  }
}
/**
 * 取消
 */
const handleCancel = () => {
  Object.assign(addForm, resetData())
  title.value = ''
  imgUrl.value = ''
  emit('onClose', false);
}
/**
 * 重置数据
 */
const resetData = () => {
  return {
    org_name: '',
    is_outer: '2',
    org_type: '',
    credit_code: '',
    concat_user: '',
    phone: '',
    address: '',
    concat_address: '',
    org_logo: '',
    org_logo_url: ''
  }
}
/**
 * 图片上传成功
 */
const onSuccess = (e:any) => {
  addForm.org_logo = e.response.data
  Message.success("图片上传成功")
}
/**
 * 图片上传变化事件
 */
const onChange = (_, currentFile) => {
  imgUrl.value = URL.createObjectURL(currentFile.file)
}
</script>
<style lang="less">
.arco-input-wrapper, .arco-select-view-single, .arco-picker, .arco-textarea{
  background: #fff;
  border: 1px solid #D3DBEB;
  border-radius: 4px;
}
</style>
<style lang="less" scoped>
.logn-upload {
  display: flex;
}
.add-img {
  width: 80px;
  height: 80px;
  background: #f5f5f5;
  margin-right: 10px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>